<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" width="50%" destroy-on-close @closed="$emit('closed')" align-center>
        <el-button type="primary" @click="print">打印</el-button>
        <el-main>
            <div class="printMain" ref="printMain" v-if="mode=='edit'">
                <div class="title">
                    <span>毛衣尺寸表</span>
                </div>
                <div class="contont">
                    <div style="display:flex">
                        <img class="img" :src="detail.goods_image_full_url" style="width: 150px;height: auto;margin: 0 5px;" />
                        <div class="top">
                            <div class="detail">
                                <div class="detailName">工厂货号 : {{detail.factory_number}}</div>
                                <div class="detailName">客户 : {{detail.referred_as}}</div>
                                <div class="detailName">SKC : {{detail.skc}}</div>
                                <div class="detailName">修改评语 : {{detail.comment}}</div>
                            </div>
                        </div>
                    </div>
                    <img class="img" :src="detail.qrcode" style="width: 150px;height: 150px;margin: 0 5px;" />
                </div>
                <div style="width: 100%;" v-if="detail.size_image_full_url">
                    <img :src="detail.size_image_full_url" style="width: 100%;height: auto;margin-top: 50px;" />
                </div>
                <div v-else class='products' style="width: 100%;border: 1px solid #000;margin-top:50px">
                    <div class='custom-table'>
                        <div class='custom-th' style='display:flex;justify-content:space-between;'>
                            <div class='w-40 left tableHeader' style="width:15%"><span>部位</span></div>
                            <div class='w-40 left tableHeader' style="border-left: 1px solid #000;width:15%"><span>量法</span></div>
                            <div class='w-40 left' style="text-align:center;width:10%">
                                <div class="applySize" style="border-bottom: 1px solid #000000;">样衣尺寸</div>
                                <div class="applySize">{{detail.colour}} - {{detail.sample_size}}</div>
                            </div>
                            <div class='w-40 left jump' style="width:10%;border-right: 1px solid #000000"><span>跳码</span></div>
                            <div class='w-10 center test' style="width: 40%;text-align: center;border-right:none">
                                <div style="padding:11px 8px;text-align:center;border-right:1px solid #000000">大货尺寸</div>
                                <div style="display: flex;justify-content:space-between;">
                                    <div class='w-40 left child' v-for="(item,index) in detail.dahuo_size" :key="index"><span>{{item.size_name}}</span></div>
                                </div>
                            </div>
                            <div class='w-40 left last' style="width:10%"><span>允差</span></div>
                        </div>
                        
                        <div class='custom-th' style='display:flex;justify-content:space-between;border-top: 1px solid #000000;' v-for="(item,index) in detail.goodsSpec" :key="index">
                            <div class='w-40 left tableHeader' style="width:15%"><span>{{item.location_name}}</span></div>
                            <div class='w-40 left tableHeader' style="border-left: 1px solid #000;width:15%"><span>{{item.measure_method}}</span></div>
                            <div class='w-40 left' style="text-align:center;width:10%">
                                <div style="border-left: 1px solid #000000;padding:11px 8px;text-align:center;border-right: 1px solid #000000">{{item.yangyi_size}}</div>
                            </div>
                            <div class='w-40 left jump test' style="width:10%"><span>{{item.tiaoma}}</span></div>
                            <div style="display: flex;justify-content:space-between;width:40%">
                                <div style="display: flex;justify-content:space-between;width:100%">
                                    <div class='w-40 left childSize' v-for="(item1,index1) in item.dahuo_size" :key="index1">{{item1.size}}</div>
                                </div>
                            </div>
                            <div class='w-40 left last' style="width:10%"><span>{{item.tolerance_range}}</span></div>
                        </div>
                        
                    </div>
                </div>
                <div style="margin-top:50px;line-height: 32px;" v-html="detail.desc"></div>
            </div>
            <div class="printMain" ref="printMain" v-if="mode=='add'">
                <div v-for="(item,index) in template_data" :key="index">
                    <div v-if="index>=1" style="page-break-after: always;"></div>
                    <div class="title">
                        <span>毛衣尺寸表</span>
                    </div>
                    <div class="contont">
                        <div style="display:flex">
                            <img class="img" :src="item.goods_image_full_url" style="width: 150px;height: auto;margin: 0 5px;" />
                            <div class="top">
                                <div class="detail">
                                    <div class="detailName">工厂货号 : {{item.factory_number}}</div>
                                    <div class="detailName">客户 : {{item.referred_as}}</div>
                                    <div class="detailName">SKC : {{item.skc}}</div>
                                    <div class="detailName">修改评语 : {{item.comment}}</div>
                                </div>
                            </div>
                        </div>
                        <img class="img" :src="item.qrcode" style="width: 150px;height: 150px;margin: 0 5px;" />
                    </div>
                    <div style="width: 100%;" v-if="item.size_image_full_url">
                        <img :src="item.size_image_full_url" style="width: 100%;height: auto;margin-top: 50px;" />
                    </div>
                    <div v-else class='products' style="width: 100%;border: 1px solid #000;margin-top:50px">
                        <div class='custom-table'>
                            <div class='custom-th' style='display:flex;justify-content:space-between;'>
                                <div class='w-40 left tableHeader' style="width:15%"><span>部位</span></div>
                                <div class='w-40 left tableHeader' style="border-left: 1px solid #000;width:15%"><span>量法</span></div>
                                <div class='w-40 left' style="text-align:center;width:10%">
                                    <div class="applySize" style="border-bottom: 1px solid #000000;">样衣尺寸</div>
                                    <div class="applySize">{{item.colour}} - {{item.sample_size}}</div>
                                </div>
                                <div class='w-40 left jump' style="width:10%;border-right: 1px solid #000000"><span>跳码</span></div>
                                <div class='w-10 center test' style="width: 40%;text-align: center;border-right:none">
                                    <div style="padding:11px 8px;text-align:center;border-right:1px solid #000000">大货尺寸</div>
                                    <div style="display: flex;justify-content:space-between;">
                                        <div class='w-40 left child' v-for="(item1,index1) in item.dahuo_size" :key="index1"><span>{{item1.size_name}}</span></div>
                                    </div>
                                </div>
                                <div class='w-40 left last' style="width:10%"><span>允差</span></div>
                            </div>
                            
                            <div class='custom-th' style='display:flex;justify-content:space-between;border-top: 1px solid #000000;' v-for="(x,i) in item.goodsSpec" :key="i">
                                <div class='w-40 left tableHeader' style="width:15%"><span>{{x.location_name}}</span></div>
                                <div class='w-40 left tableHeader' style="border-left: 1px solid #000;width:15%"><span>{{x.measure_method}}</span></div>
                                <div class='w-40 left' style="text-align:center;width:10%">
                                    <div style="border-left: 1px solid #000000;padding:11px 8px;text-align:center;border-right: 1px solid #000000">{{x.yangyi_size}}</div>
                                </div>
                                <div class='w-40 left jump test' style="width:10%"><span>{{x.tiaoma}}</span></div>
                                <div style="display: flex;justify-content:space-between;width:40%">
                                    <div style="display: flex;justify-content:space-between;width:100%">
                                        <div class='w-40 left childSize' v-for="(item1,index1) in x.dahuo_size" :key="index1">{{item1.size}}</div>
                                    </div>
                                </div>
                                <div class='w-40 left last' style="width:10%"><span>{{item.tolerance_range}}</span></div>
                            </div>
                            
                        </div>
                    </div>
                    <div style="margin-top:50px;line-height: 32px;" v-html="item.desc"></div>
                </div>
            </div>
        </el-main>
    </el-dialog>
</template>

<script>
	import print from '@/utils/print'
	export default {
		name: 'print',
		data() {
			return {
                mode: "add",
				titleMap: {
					add: '打印工艺单',
					show: '打印',
					over: '退货'
				},
				visible: false,
				isSaveing: false,
                detail:{},
                template_data:[]
            }
		},
		methods: {
            //显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this
			},
            setData(data){
                if(this.mode=='edit'){
                    this.detail = data[0]
                }else if(this.mode=='add'){
                    this.template_data = data
                }
			},
			print(){
				//直接传入REF或者querySelector
				print(this.$refs.printMain)
                setTimeout(()=>{
                    this.visible = false
                },500)
			},
		}
	}
</script>

<style scoped lang="scss">
div{
    color: #000;
}
.title{
    text-align: center;
    font-weight: 600;
    font-size: 32px;
    color: #000;
    padding: 30px 0 10px;
}
.type{
    text-align: center;
    font-size: 22px;
}
.contont{
    display: flex;
    justify-content: space-between;
    align-content: flex-start;
    margin-top: 10px;
    .header{
        margin-left: 10px;
        width: 100%;
        .comment{
            margin-bottom: 20px;
            display: inline-block;
        }
    }
}
.top{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-left: 50px;
    .detail{
        line-height: 32px;
    }
}
.materName{
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}
.tableHeader{
    width:60%;
    text-align:center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.child{
    border-right: 1px solid #000000;
    border-top: 1px solid #000000;
    padding:11px 8px;
    text-align:center;
    width:100%;
}
.childSize{
    padding:11px 8px;
    text-align:center;
    width:100%;
    border-right: 1px solid #000;
}
.last{
    width:30%;
    text-align:center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.applySize{
    border-left: 1px solid #000000;
    padding:11px 8px;
    border-right: 1px solid #000;
    text-align:center;
}
.jump{
    width:50%;
    text-align:center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lastNumber{
    padding:11px 8px;
    text-align:center;
    width:100%;
}
.test{
    // border-left: 1px solid #000000;
    border-right: 1px solid #000000;
}
</style>
